<template>
	<view>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title">确认密码 
						<text v-if="error_messages.password" class="text-red">{{ error_messages.password }}</text>
					</view>
					<input class="uni-input" v-model="form.password" password type="text" placeholder="密码" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">设置新密码 
						<text v-if="error_messages.new_password" class="text-red">{{ error_messages.new_password }}</text>
					</view>
					<input class="uni-input" v-model="form.new_password" password type="text" placeholder="密码" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">确认设置新密码 
						<text v-if="error_messages.new_password2" class="text-red">{{ error_messages.new_password2 }}</text>
					</view>
					<input class="uni-input" v-model="form.new_password2" password type="text" placeholder="密码" />
				</view>
				<view class="uni-btn-v" style="padding:9px 3%;">
					<button type="primary" formType="submit">修改密码</button>
				</view>
			</form>

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import * as types from 'store/mutations_types'
	import * as API from 'server/getData'

	export default {
		components: {
		},
		data() {
			return {
				error_messages: [],
				form: {
					password: '',
					new_password: '',
					new_password2: ''
				},
			}
		},
		onLoad() {
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			async formSubmit() {
				let res = await API.user.setting_user(this.form)
				if (!res.success) {
					this.error_messages = res.message[0]
					return false
				}
				let _this = this
				if (res.success) {
					uni.showToast({title: '修改成功, 重新登陆。', duration: 2000})
					setTimeout(function () {
						_this.$store.commit(types.LOGOUT)
						uni.reLaunch({url: 'login'})
					}, 2000)
				}
			}
		}
	}
</script>

<style>
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.text-red {
		color: red;
		margin-left: 10px;
	}
</style>
